import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Query } from 'react-apollo'
import ItemNumber from 'graphql/project/taskAssign/getItemNum.graphql'
import Members from 'graphql/project/taskAssign/allUsers.graphql'
import Teams from 'graphql/project/taskAssign/allTeams.graphql'
import NewTasks from 'graphql/project/taskAssign/assignLabelTask.graphql'
import { Header, Image } from 'semantic-ui-react'
import { ValidType } from 'components/validForm'
import {
  Form as FormTable,
  Section as TableSection,
  Switch,
  Submit,
  MultiSwitch,
  Input,
} from 'components/tableForm'
import { global as globalDuck } from 'ducks'

const getVariables = orgid => (values) => {
  const result = { config: {orgid} }
  if (values.number) result.config.number = values.number.value
  if (values.teams) {
    result.config.teams = Object.keys(values.teams.value).reduce((pre, next) => {
      if (values.teams.value[next]) pre.push(next)
      return pre
    }, [])
  }
  if (values.members) {
    result.config.members = Object.keys(values.members.value).reduce((pre, next) => {
      if (values.members.value[next]) pre.push(next)
      return pre
    }, [])
  }
  return result
}

class newDataset extends Component {
  componentDidMount = () => {}

  render() {
    const { project } = this.props
    const { projectId, projectName, orgId,orgName } = project
    const returnUrl = `/project/${orgName}/${projectName}/assign/label`
    return (
      <Query query={ItemNumber} variables={{ projectId }}>
        {({ loading, error, data }) => {
          if (loading) return 'Loading....'
          if (error) return `Error! ${error.message}`
          const numberCount = data.project_task_item_aggregate.aggregate.count
          const nameRule = [
            {
              type: ValidType.NUMBER,
              value: { min: 1, max: numberCount },
              errorMessage: `数量应该在1到${numberCount}之间`,
            },
          ]
          return (
            <FormTable>
              <TableSection header="邀请成员">
                <Input
                  name="number"
                  header="输入要分配的样本数量"
                  description={`最多${numberCount}`}
                  rules={nameRule}
                />
                <MultiSwitch
                  name="teams"
                  header="选择标注组织"
                  description="选择需要分配任务的项目组织"
                  query={{
                    query: Teams,
                    variables: { projectId },
                    getData: (data) => {
                      if (!data && !data.project_team) return []
                      return data.project_team.map(member => ({
                        name: member.team_object.path === '' ? member.team_object.name : `${member.team_object.path}/${member.team_object.name}`,
                        value: member.team_object.name,
                      }))
                    },
                  }}
                />
                <MultiSwitch
                  name="members"
                  header="选择标注人员"
                  description="选择需要分配任务的项目成员"
                  query={{
                    query: Members,
                    variables: { projectId },
                    getData: (data) => {
                      if (!data && !data.project_member) return []
                      return data.project_member.map(member => ({
                        name: member.user_object.id,
                        value: member.user_object.name,
                      }))
                    },
                  }}
                />
              </TableSection>
              <Submit
                submit={{
                  text: '分配',
                  variables: { projectId },
                  getVariables: getVariables(orgId),
                  mutation: NewTasks,
                  success: data => returnUrl,
                }}
                cancle={{ text: '取消', url: returnUrl }}
                redirect
              />
            </FormTable>
          )
        }}
      </Query>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(newDataset)
